<!-- 试听播放页 -->
<template>
  <div class="container videoPlayer">
      <div class="title_box">
        <span class="title">{{subjectName}}</span>
      </div>

      <!-- 视频课 -->
      <div class="video_box">
        <video id='video' x5-video-player-type="h5-page" webkit-playsinline="true" playsinline="true" @canplay="audioLoad"  ref="audio" preload="metadata" autoplay="autoplay" controls :src="`${videoUrl}`" ></video>
      </div>

      <div class="btn_box">
        <div class="btn_reset" @click="resetAudio"></div>
        <div class="btn_play"  @click="playAudio" v-if="!audioPlay"></div>
        <div class="btn_pause" @click="pauseAudio" v-else></div>
      </div>
    </div>
</template>

<style scoped>
.video_box, #video {
  width: 100%;
}
.title_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4rem 0 .4rem .3rem;
}
.title_box .title {
  color: #FE8697;
  font-size: .426667rem;
  font-weight: bold;
}
.title_box .title:before {
  content: '';
  display: inline-block;
  width: 0.626667rem;
  height: 0.386667rem;
  background: url('../assets/img/icon_classTitle2.png') 0 0 no-repeat;
  background-size: contain;
}
.btn_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .4rem;
}
.btn_box > div {
  margin: 0 .266667rem;
}
.btn_box .btn_reset {
  width: 1.053333rem;
  height: 1.053333rem;
  background: url('../assets/img/btn_reset.png') 0 0 no-repeat;
  background-size: contain;
}
.btn_box .btn_pause {
  width: 1.28rem;
  height: 1.28rem;
  background: url('../assets/img/btn_pause.png') 0 0 no-repeat;
  background-size: contain;
}
.btn_box .btn_play {
  width: 1.28rem;
  height: 1.28rem;
  background: url('../assets/img/btn_play.png') 0 0 no-repeat;
  background-size: contain;
}
</style>

<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("adminBasic");

export default {
  data() {
    return {
      subjectName: '',
      videoUrl: '',
      audioPlay: false,

    }
  }, 

  created() {
    this.initData();
    this.subjectName = this.$route.query.subjectName
  },

  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    initData() {
      this.formGet({
        API: 'getPlayInfoData',
        data: {
          videoId: this.$route.query.videoId
        }
      }).then(res => {
        if(res.playInfoList) {
          this.videoUrl = res.playInfoList[0].playURL;
          // this.$set(this.activeQuestion, paraName, url)
          this.$forceUpdate();
        }

      })
    },
    resetAudio() {
      let audio = this.$refs.audio;
      audio.currentTime = 0;
    },
    playAudio() {
      let audio = this.$refs.audio;
      this.audioPlay = true;
      setTimeout(() => {
        audio.play();
      })
    },
    pauseAudio() {
      let audio = this.$refs.audio;
      this.audioPlay = false;
      audio.pause();
    },

    audioLoad() {
      this.playAudio();
    },

    playAudio() {
      let audio = this.$refs.audio;
      this.audioPlay = true;
      setTimeout(() => {
        audio.play();
      })
    },
  }

}

</script>